<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-collapse v-model="collapseActives" class="edittypeform">
                <el-collapse-item title="资源库" name="1">
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>选择文件</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <img-store v-model="obj.cardImgData.url">
                                <el-button size="mini" slot="button">请选择资源图片</el-button>
                            </img-store>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="系统库" name="2">
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>分类</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-select v-model="library" placeholder="选择模板类型" size="mini" style="width:190px;">
                                <el-option :label="item.name" :value="index" v-for="(item, index) in libraryArr"
                                    :key="index" />
                            </el-select>
                        </el-col>
                    </el-row>
                    <ul class="icon-list">
                        <li v-for="url in libraryArr[library].data" :key="url" @click="onimgChangeHandle(url)"
                            :class="{ 'active': url == obj.libraryUrl }">
                            <img :src="url" alt="">
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>填充方式</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio-group v-model="obj.fillType" size="mini">
                        <el-radio-button :label="0">拉伸</el-radio-button>
                        <el-radio-button :label="1">适应</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>透明度</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-slider v-model="obj.opacity" :min="0" :max="1" step="0.1" style="width:150px;"></el-slider>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="事件">
            <event-form :obj="obj" />
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "CardImgForm",
    props: {
        obj: Object,
    },
    components: {
        ImgStore: () => import("@/components/ImgStore"),
        BoxForm: () => import('../mixin/BoxForm.vue'),
        EventForm: () => import('../mixin/EventForm.vue'),
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            library: 0,
            collapseActives: ['1', '2'],
            libraryArr: [{
                name: "生产车间",
                data: [
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/vpw+Dddwu0gsJBu6Zp9HHeHlREc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/gYGdXEaGJE9aslSOgMuoM7SYirc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/A9ASD0ZHHzQRpm5r9DVtU+2MOEc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/9IU9UB/xB/nEE4sZbCKExGrtAqg=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/kc8katjpyTqbktJZ+NFzm3Oj1IU=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/Cm88VGTPu0mMNmXVwMCCrMbs0Xs=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/kO18XaljnoovE+mXaolyxRjFGGk=.png"]
            },
            {
                name: "集团大屏",
                data: [
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/fM6xo1TaZ8jN12NJXi/cIjys5pg=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/XKdKzTwhMBKlXeCqHfnfoqQJgcY=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/9xqsCIvAp1MoVkcpj2tQ8UkW9Y0=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/fQVgEqOcmgVaXwNoL9YizOZjUyc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/eRUSR0gkba1V4uaNmEYhMa2sdDA=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/u7EeidY7H5KE/as9DrZS9b5hxiQ=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/N8ivbq6vZMyy/ApfaLauQdqKcW0=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/FkFL5RkjkDX6Nu2ExaJg9zjyf7A=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/5lJ+9oUP7gV/5remjKaof0QbkAQ=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/scrzjUMk1ZFyj3aNu4InerO5PyU=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/GeG+kSjAO3QDh6LjNjjZAOjXWek=.png"
                ]
            },
            {
                name: "水物管理",
                data: [
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/JM6aVM4MkDlwb4bV7VpNAikClGU=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/jaRB4hoaVSqhRuBK4HVM6UqMCX0=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/CPd4uQGT3NXrEKLuvcTN7uNAV/I=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/ctFDYCIN24hIfEjFxORA5SZMtPQ=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/oUtEAEc/LbQ8nkuNKWHXG/+a6Xk=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/ZQ6iFj/thvYQIQVipXBiJAsTO+w=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/0VgyQz1nGmm2WZLa2u4YtlNvzRg=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/8e5fyYBNbG5IMaQpFPvGZ78uF1o=.png"
                ]
            }, {
                name: "物业大屏",
                data: [
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/Hiq8aeBa2LtdD5LtYkbMmInenpY=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/YiSfYNBUO75dWDLvS7FI88h/8qM=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/E8LPe3GN09drhEKSEFiYrsAAFgU=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/KPC9OObGVUJDnWybtfhk0kbdr74=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/xMtYKKSGw0aJXBuPUFy3jHN1iow=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/NKGJVQoOU0YJENdIU1U08Wrlph4=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/ayk3n+J8Xdj+SNUaK+5e3y7QRig=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/Qi3eeQP59d61BKC8VtnPMQQwIfc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/mvpL2paCNCT51XsdJOIpH9F4yS8=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/R55UijXxmhtWzQAy3/xMF6dHzJM=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/KlYuCnzsaT0wT1+A6pnyqLR+sdE=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/xJWGyWWeJ/hzqHTIxhKH8NPOUL0=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/LwOZkqABNZ2ykL6+rbNJxkClSfU=.png",
                ]
            }, {
                name: "智慧城市",
                data: [
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/Z+MMRzxCMZUmcWdu+4Zo9BSpgsc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/FNWftvZ4TEq/L37XTnutfgM4uwU=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/LZ/q3Dt7Yc7Ufyg7MZuViGW7IoE=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/VI0XEuEFdEEcxVUBNc4AH/GH4oI=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/AK+yWrd33OyB5DtVNcffwGBkvgI=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/5jags+jM7HbCvOVrZe0cd7JbY0A=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/dsrNCE204RngjoD6PC3kLmhiuJI=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/Bk0jzXF9kCoTLdwsMypeqMCzDSE=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/jpTj9e3JO9MCz3J7/p92uSLSauc=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/TQdYLBtLwn7FSY+8hZ1Gq6vF4bs=.png",
                    "https://baichu-cos-1301549413.cos.ap-shanghai.myqcloud.com/2342353245234/F+o03S7qHrTq9qEvciqysE2rZ9o=.png"
                ]
            }],
        }
    },
    methods: {
        onimgChangeHandle(i) {
            this.obj.cardImgData.url = "";
            this.obj.libraryUrl = i;
        }
    }
}
</script>

<style scoped>
ul.icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
}

.icon-list li {
    float: left;
    width: 47%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    border: 1px solid #e6e4e4;
    cursor: pointer;
    margin: 0 10px 10px 0;
    text-align: center;
    overflow: hidden;
    justify-content: center;
    display: flex;
    align-items: center;
}

.icon-list li img {
    max-width: 100%;
    max-height: 100%;
}


.icon-list li.active,
.icon-list li:hover {
    border-color: #409eff;
}
</style>